<template>
  <!-- 英雄组件 -->
  <div class="hero-card">
    <a :class={loading:isloading}  @mouseover="mouseOver" @mouseleave="mouseLeave" @click="selectChampionById(hero.id)">
      <img :src="hero.iconImg"/>
      <div class="back" :style="opacity">
        <img src="../../pic/big.png" alt="">
      </div>
      <p :class={intro:isintro,green:isGreen}>{{ hero.name }}</p>
      <div class="hideDetail" v-show="seen" >
        {{hero.name}}-{{hero.title}}
      </div>
    </a>
  </div>
</template>

<script>
import {getChampionById} from "@/api/champion";
export default {
    name:"heroCard",
  data() {
    return {
        isloading:true,
        isintro:true,
        isGreen:false,
        opacity:"opacity:0",
        seen:false,
        positionStyle:{top:'0px',left:'0px'},
    };
  },
  props: {
    
    hero: {
      type: Object,
      default: {},
    },
  },

  methods: {

    // 点击英雄跳转到详情页面
    selectChampionById(id) {
      //console.log(id)
      //this.$router.push({path:'/champion/',query: {id}})
      window.location.href="/champion/"+id;
    },
    
    // updateXY:function(event){
    //     //console.log(event.clientX)
    //     this.x=event.pageX;
    //     this.y=event.pageY;
    //     this.positionStyle={top: this.y+10 + 'px',left: this.x+10 + 'px'};
    //   },
      
    // 鼠标经过将会显示英雄全称以及放大镜图片样式
    mouseOver:function() {
      //console.log(this.$refs.box.innerText);
      this.isintro=false;
      this.isGreen=true;
      this.opacity="opacity:0.5";
      this.seen = true;
    },
    mouseLeave:function() {
      this.isintro=true;
      this.isGreen=false;
      this.opacity="opacity:0";
      this.seen = false;
    },
    
}
}
</script>

<style lang="less" scoped>
.back{
  width: 66px;
  height: 65px;
  background-color:	#00CED1;
  //opacity: 0.5;
  position: absolute;
  top:0px;
}
.back img{
  width: 25px;
  height: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
img{
  width: 66px;
  height: 65px;
}
.loading {
  width: 66px;
  height: 65px;
  border: 1px soli black;
  display: block;
  margin: 5px;
  align-items: center;
  margin-bottom: 30px;
  position: relative;

  .intro {
    color: #666;
    font: normal 12px/1.6em Microsoft YaHei,Tahoma,simsun;
    text-align: center;
  }
}

.green{
  color: #008B45;
  font: normal 12px/1.6em Microsoft YaHei,Tahoma,simsun;
  text-align: center;
}

.hideDetail{
  //width: 120px;
  white-space: nowrap;
  height: 18px;
  font-size: 12px;
  color: #000;
  border: 1px solid black;
  text-align: center;
  background-color: white;
  position: absolute;
  z-index: 10;
  top: 40px;
  left: 50px;
}
</style>